<template>
	<n-popover v-model:show="show" trigger="manual" :show-icon="false" :positive-text="null" :negative-text="null">
		<template #trigger>
			<n-button class="extraVar-trigger-btn" v-bind:class="show ? 'extraVar-show' : ''" strong type="info" circle
				color="#1890FD" @click="handleTriggerBtn">
				<template #icon>
					<svg-icon icon="ic:baseline-add" />
				</template>
			</n-button>
		</template>
		<template #default>
			<n-space vertical>
				<n-space justify="center" class="mb-2 font-600 text-sm">
					扩展变量
				</n-space>
				<n-space v-for="item, i in extraItems">
					<n-input :ref="inputKeyRef" v-model:value="extraItems[i].key" placeholder="key"  style="width: 150px;" @keyup.enter.native="handleAddExtra" />
					<n-input v-model:value="extraItems[i].value" placeholder="说明" style="width: 100px;"  @keyup.enter.native="handleAddExtra"/>
					<n-popconfirm @positive-click="() => handleDeleteItemRow(i)" @negative-click="() => { }">
						<template #trigger>
							<n-button strong secondary circle type="error" size="small" class="mt-1">
								<template #icon>
									<svg-icon icon="material-symbols:delete" />
								</template>
							</n-button>
						</template>
						是否确认删除当前行数据
					</n-popconfirm>
				</n-space>
				<n-space>
					<n-button @click="handleAddExtra">添加一行</n-button>
				</n-space>
			</n-space>
		</template>
	</n-popover>
</template>

<script  setup lang='ts' >
import { InputInst } from 'naive-ui';
import { onMounted, ref, toRefs,nextTick } from 'vue';

type Item = {
	key: string, value: string
}
type Props = {
	extra?: Record<string, string>
}
const props = defineProps<Props>()
const { extra } = toRefs(props)
const extraItems = ref<Item[]>([])
const show = ref<boolean>(false)
const inputKeyRefList =ref<InputInst[]>([])
const inputKeyRef = (el:any)=>{
	if(el)inputKeyRefList.value.push(el)
}

function vaildItemList():boolean{
	const temps =  extraItems.value
	for(let i = 0 ; i<temps.length ; i++){
		const temp = temps[i]
		if(!(temp.key && temp.value)){
			return false
		}
	}
	return true;
}
function handleTriggerBtn() {
	show.value = !show.value
}
function handleAddExtra() {
	if(!vaildItemList()){
		window.$message?.error("存在不符合规范的数据，请处理后，再进行新增操作")
		return
	}
	extraItems.value.push({key:"",value:""})
	nextTick(()=>{
		inputKeyRefList.value[inputKeyRefList.value.length-1]?.focus()
	})

}
function handleDeleteItemRow(i: number) {
	extraItems.value.splice(i,1)
}

function refreshExtra():Record<string,string>|null{
	if(!vaildItemList()){
		window.$message?.error("存在不符合规范的数据，请处理后，再进行提交操作")
		throw new Error("存在不符合规范的数据，请处理后，再进行提交操作")
	}
	const record:Record<string,string> = {}
	extraItems.value.forEach(it=>{
		record[it.key] = it.value
	})
	return record;
}

onMounted(() => {
	if(extra && extra.value){
		for (let key in extra.value) {
			const value = extra.value[key]
			extraItems.value.push({ key: key, value: value })
		}
	}

})


defineExpose({
  refreshExtra
});
</script>

<style lang='scss' scoped>
.extraVar-trigger-btn {
	position: absolute;
	z-index: 99;
	bottom: .5rem;
	right: .5rem;
	transition: all .5s;
}

.extraVar-show {
	transform: rotate(45deg)
}

.card-title {
	width: 100%;
	text-align: center;

}
</style>
